{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}文章栏目{% endblock %}
{% block content %}
<div>
    <p class="text-right">
        <button id="add-column" onclick="add_column()" class="btn btn-primaty">
            新建栏目
        </button>
    </p>
    <table class="table table-hover">
    <tr>
        <td>序号</td>
        <td>栏目名称</td>
        <td>操作</td>
    </tr>
    {% for column in columns %}
    <tr>
        <td>{{forloop.counter}}</td>
         <td>{{column.column}}</td>
         <td>
             <a name="edit" href="javascript:"onclick="edit_column(this,{{ column.id }})">
             <span class="glyphicon glyphicon-pencil"></span>
             </a>
             <a name="delete" href="javascript:"onclick="del_column(this,{{ column.id }})">
                 <span class="glyphicon glyphicon-trash" style="margin-left:20px;"></span>
             </a>
         </td>
    </tr>
    {% empty %}
    <p>还没有设置栏目，太懒了</p>
    {% endfor %}
    </table>
</div>
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
<script type="text/javascript">
    function add_column(){
    var index=layer.open({
        type: 1,
        skin: "laiui-layer-rim",
        area: ["400px", "200px"],
        title: "新增栏目",
        content: '<div class="text-center" style="margin-top:20px"> <p> 请输入新栏目名称 </p> <p> {{column_form.column}}</p> </div>',
        btn:['确定', '取消'],
            yes:function (index, layero) {
            column_name = $('#id_column').val();
            $.ajax(
                {
                    url: '{% url "article:article_column" %}',
                    type: 'POST',
                    data: {"column": column_name},
                    success: function (e) {
                        if (e == 1) {
                            parent.location.reload();
                            layer.msg("good",{icon:1});
                        } else {
                            layer.msg("此栏目已有，请更换名称",{icon:2});
                        }
                    },
                }
            );
        },

        btn2:function(index, layero) {
            layer.close(index);
        }
    }
         );
         }
function del_column(the,column_id){
        var name=$(the).parents("tr").children("td").eq(1).text();
        layer.open(
            {
                type:1,
                skin:"layui-layer-rim",
                area:["400px","200px"],
                title:"删除栏目",
                content:'<div class="text-center" style="margin-top:20px"><p>是否确定删除'+name+'栏目</p></div>',
                btn:['确定','取消'],
                yes:function(){
                    $.ajax({
                        url:'{% url "article:del_article_column" %}',
                        type:"POST",
                        data:{"column_id":column_id},
                        success:function (e) {
                            if(e=='1'){
                            parent.location.reload();
                            layer.msg("本记录已经删除");}
                            else{
                                layer.msg("删除失败");
                            }
                        },
                        })
                },
            });
}
</script>
{% endblock %}